<template>
  <div class="breadcrumb">
    <div class="ico" @click="isShowTitle()">
      <i class="el-icon-s-fold" v-show="IsShowTitle"></i>
      <i class="el-icon-s-unfold" v-show="!IsShowTitle"></i>
    </div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="padding-left: 10px"
    >
      <el-breadcrumb-item v-for="item in breadcrumbArr" :key="item">
        {{ item }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      // MenuTree: [],
    };
  },
  methods: {
    isShowTitle() {
      this.$store.commit("SET_IsShowTitle");
    },
  },
  //计算属性
  computed: {
    ...mapGetters(["Breadcrumb", "IsShowTitle"]),
    breadcrumbArr: function () {
      // `this` 指向 vm 实例
      var arr = [];
      var pathUrl = this.$route.path;
      this.Breadcrumb.forEach((item) => {
        if (item.url == pathUrl) {
          arr = item.titleArr;
        }
      });
      return arr;
    },
  },
};
</script>
<style lang="less" scoped>
.breadcrumb {
  display: flex;
  height: 56px;
  align-items: center;
  cursor: pointer;
  .ico {
    font-size: 18px;
    line-height: 56px;
    padding: 0 15px;
  }
  .ico:hover {
    background-color: #e9eef3;
  }
}
</style>